import React from 'react'
import {Card,Button,Modal} from 'antd'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftjs from 'draftjs-to-html'
import './index.less'
export default class Richtext extends React.Component{
    state={
        showRichText:false,
        editorState:''
    };
    //编辑器状态
    onEditorStateChange = (editorState)=>{
        this.setState({
            editorState
        });
    };
    //内容状态
    onContentStateChange =(contentState) =>{
        this.setState({
            contentState,
        });
    };
    handleclear = ()=>{
        this.setState({
            editorState:''
        });
    };
    handleget= ()=>{
        this.setState({
            showRichText:true
        });
    }
    render(){
        const {editorState} =this.state;
        return(
            <div>
                <Card>
                    <Button type='primary' onClick={this.handleclear}>清空内容</Button>
                    <Button style={{marginLeft:20}} type='primary' onClick={this.handleget}>获取html文本</Button>
                </Card>
              <Card title='富文本编辑器'>
                  <Editor
                      editorState={editorState}
                      toolbarClassName="toolbarClassName"
                      wrapperClassName="wrapperClassName"
                      editorClassName="editorClassName"
                      onContentStateChange={this.onContentStateChange}
                      onEditorStateChange={this.onEditorStateChange}
                  />
              </Card>
                {/*事件的名称应该遵循驼峰命名法*/}
                <Modal
                title='富文本编辑器内容'
                visible={this.state.showRichText}
                onCancel={()=>{
                    this.setState({
                        showRichText:false
                    })
                }}
                footer={null}
                >
                    {draftjs(this.state.contentState)}
                </Modal>
            </div>
        )
    }
}